window.onload = function() {
    var recommend = document.querySelector('.j_feeds .more .shangpin_lists')
    var xhr = new XMLHttpRequest();
    xhr.open('get', 'http://localhost:8888/goods/list');
    xhr.send();
    xhr.onreadystatechange = function() {
        if(xhr.readyState === 4) {
            if(parseInt(xhr.status / 100) === 2) {
                res = xhr.responseText;
                res = JSON.parse(res);
                console.log(res);
                var {code, list} = res;
                if(code === 1) {
                    var str = '';
                    console.log(list[0].data[0].clk);
                    for(var i = 0; i < list.length; i++) {
                        var data = list[i].data;
                        str += `<ul class="shangpin_tou${i}">`
                        for(var x = 0; x < data.length; x++) {
                            str += `
                                <li>
                                    <a href="./html/detail.html?id">
                                        <img src="${data[x].img}">
                                        <p class="rrrd">
                                            ${data[x].t}  
                                        </p>
                                        <i>￥${data[x].jp}</i>
                                        <span>卷</span>
                                    </a>
                                </li>
                            `;
                        }
                        str += `</ul>`
                    }
                    recommend.innerHTML = str;

                    // 如果source为1 则有卷 否则无卷
                    // <span>${data[x].source}</span>
                    var spans = document.querySelectorAll('.j_feeds .more .shangpin_lists li a span');
                    for(var j = 0; j < list.length; j++) {
                        for(var s = 0; s < list[j].data.length; s++) {
                            if(list[j].data[s].source == 1) {
                                spans[(s) + (25 * j)].style.display = 'block';
                            } else {
                                spans[(s) + (25 * j)].style.display = 'none';
                            }
                        }
                    } 
                    
                    var ts = document.querySelectorAll('.feed_tab ul li a');
                    var sps = document.querySelectorAll('.feed_tab ul li a span:first-child')
                    var spas = document.querySelectorAll('.feed_tab ul li a span:nth-last-child(2)')
                    var uls = document.querySelectorAll('.j_feeds .more .shangpin_lists ul')

                    // console.log(uls);
                    
                    for(let t = 0; t < ts.length; t++) {
                        
                    //     ts[t].onmouseenter = function() {            
                    //         this.style.color = 'ffffff'
                    //         for(let a = 0; a <ts.length; a++) {
                    //             sps[a].style.color = '#333';
                    //             spas[a].style.color = '#2f3430';
                    //             if(sps[a].getAttribute('class').indexOf('rdrad') > -1) {
                    //                 sps[a].style.color = '#ffffff';
                    //                 spas[a].style.color = '#e33333';
                    //             }
                    //         }
                            
                    //         if(sps[t].getAttribute('class').indexOf('rdrad') > -1) {
                    //             sps[t].style.color = '#ffffff';
                    //             spas[t].style.color = '#e33333';
                    //         } else {
                    //             sps[t].style.color = '#e33333';
                    //             spas[t].style.color = '#e33333';
                    //         }
                    //    }
                       ts[t].onclick = function() {
                            if(t == 0) {
                               for(var d = 0 ; d < uls.length; d++) {
                                   uls[d].style.display = 'block';
                               }
                            } else {
                                for(var n = 0; n < uls.length; n++) {
                                    uls[n].style.display = 'none';
                                }
                                // console.log(uls[t]);
                                uls[t].style.display = 'block';
                            }

                            for(var tis = 0; tis < ts.length; tis++) {
                                sps[tis].className = 'sp';
                                spas[tis].style['color'] = '';    
                            }
                            sps[t].className = 'sp rdrad';
                            spas[t].style['color'] = '#e33333';

                        }
                    }  
                }
            }
        }
    }
}